<template>
  <section>
    <div style="text-align:center; backgroundColor: #fff;">
      <!-- tabs工具条 -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="商户信息管理" name="first"></el-tab-pane>
      </el-tabs>
      <el-row>
        <el-col :span="24" style="padding: 0; height: 60px;">
          <el-button @click="search" type="primary" style="width: 80px">
            <i class="el-icon-search"></i>查询
          </el-button>
        </el-col>
      </el-row>
      <template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" align="center"></el-table-column>
          <el-table-column prop="merchantId" label="ID" align="center" width="50"></el-table-column>
          <el-table-column prop="nickname" label="真实姓名" align="center" width="100"></el-table-column>
          <el-table-column prop="phone" label="注册手机号" align="center" width="120"></el-table-column>
          <el-table-column prop="aliRate" align="center" label="支付宝费率" width="100"></el-table-column>
          <el-table-column prop="wxRate" align="center" label="微信费率" width="90"></el-table-column>
          <el-table-column prop="address" label="地址" align="center" width="120"></el-table-column>
          <el-table-column prop="email" label="邮箱" align="center" width="180"></el-table-column>
          <el-table-column prop="companyName" label="公司名称" align="center" width="120"></el-table-column>
          <el-table-column prop="sharePersonCode" label="邀请人" align="center" width="120"></el-table-column>
          <el-table-column prop="shareCode" label="邀请码" align="center" width="200"></el-table-column>
          <el-table-column prop="country" label="国家ID" align="center" width="120"></el-table-column>
          <el-table-column prop="merchantType" label="类型" align="center" width="120"></el-table-column> 
          <el-table-column prop="status" label="出入金控制状态" align="center" width="120"></el-table-column> 
          <el-table-column prop="certificateType" label="证件类型" align="center" width="120"></el-table-column> 
          <el-table-column prop="certificateNo" label="证件号码" align="center" width="300"></el-table-column> 
          <el-table-column prop="idcardFront" label="正面照" align="center" width="120"></el-table-column>
          <el-table-column prop="idcardReverse" label="反面照" align="center" width="120"></el-table-column>
          <el-table-column prop="idcardHand" label="手持照" align="center" width="120"></el-table-column>
          <el-table-column prop="bankFront" label="银行正面照" align="center" width="120"></el-table-column>
          <el-table-column prop="bankReverse" label="银行反面照" align="center" width="120"></el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            background
            @size-change="pageSizeChange"
            @current-change="pageIndexChange"
            :current-page="pageIndex"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dataTotal"
          ></el-pagination>
        </div>
      </template>
      <transition name="el-fade-in-linear">
          <div class="spin-container" v-if="gridLoading">
            <div class="spin1">
              <div class="spin2">
              </div>
                <div class="spin3">
              </div>
            </div>
          </div>
      </transition>
    </div>
  </section>
</template>
<script>
import DataUtil from "../../common/dataUtil";
import { getUserList  } from "@/api/index.js";

export default {
  data() {
    return {
      gridLoading: false,
      activeName: "",
      pageIndex: this.$store.getters.getOrderListAllIndex,
      pageSize: 10,
      dataTotal: 0,
      tableData: []
    };
  },
  methods: {
    pageIndexChange(val) {
				this.pageIndex = val;
				this.$store.dispatch('setOrderListAllIndex', val)
				this.search();
    },
    pageSizeChange(val) {
    },
    search() {
      this.bindGrid();
    },
    bindGrid() {
      this.gridLoading = true;
      const formData = new FormData();
      formData.append('id',JSON.parse(DataUtil.userInfo()).id);
      // formData.append('phone','');
      // formData.append('nickname','');
      // formData.append('companyName','');
      formData.append('pageNum',this.pageIndex)
      getUserList(formData).then(response => {
        if ('01001' == response.status) {
          this.gridLoading = false;
          if(response.data){
            this.tableData = response.data.dataList;
            this.dataTotal = response.data.page.recordCount;
          }else {
            this.tableData = [];
            this.dataTotal = 0;
          }
          // formData.delete("id");
          // formData.delete("pageNum");
        } else {
          // formData.delete("id");
          // formData.delete("pageNum");
          this.$message.error(response.msg);
        }
      }, response => {
        this.gridLoading = false;
      });
    }
  },
  mounted: function() {
    this.bindGrid();
  },
};
</script>
<style>
.blur {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10%;
  margin-top: 0;
}
.el-pagination {
  display: inline-block;
  width: 80%;
}
.block {
  padding: 10px 0;
}
.spin-container {
    background: rgba(0,0,0,.1)!important;
}
</style>
